<template>
    <div @click="onFieldClick" class="edit-cell">
      <el-tooltip v-if="!editMode && !showInput"
                  :placement="toolTipPlacement"
                  :open-delay="toolTipDelay"
                  :content="toolTipContent">
        <div tabindex="0" @keyup.enter="onFieldClick">
          <slot name="content"></slot>
        </div>
  
      </el-tooltip>
      
      <el-select v-model="model" v-if="editMode || showInput" clearable filterable style="height: 24px;" size="mini" @change="onInputExit">
        <el-option v-for=" item in selectDataList" :key="item.id" :value="item.id+''" :label="item.subjName" ></el-option>

      </el-select>
      <!-- <component :is="editableComponent"
                 v-if="editMode || showInput"
                ref="input"
                style="height: 25px;"
                @focus="onFieldClick"
                @keyup.enter.native="onInputExit"
                v-on="listeners"
                v-bind="$attrs"
                v-model="model">11111111111111111
          <slot name="edit-component-slot">11111111111</slot>
      </component> -->
    </div>
  </template>
  <script>
  export default {
    name: "editable-cell",
    inheritAttrs: false,
    props: {
      selectDataList: {
        type: Array,
        default: []
      },
      value: {
        type: String,
        default: ""
      },
      toolTipContent: {
        type: String,
        default: "点击编辑"
      },
      toolTipDelay: {
        type: Number,
        default: 500
      },
      toolTipPlacement: {
        type: String,
        default: "top-start"
      },
      showInput: {
        type: Boolean,
        default: false
      },
      editableComponent: {
        type: String,
        default: "el-input"
      },
      closeEvent: {
        type: String,
        default: "blur"
      }
    },
    data() {
      return {
        editMode: false
      };
    },
    computed: {
      model: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit("input", val||'');
        }
      },
      listeners() {
        return {
          [this.closeEvent]: this.onInputExit,
          ...this.$listeners
        };
      }
    },
    methods: {
      onFieldClick() {
        this.editMode = true;
        this.$nextTick(() => {
          let inputRef = this.$refs.input;
          if (inputRef) {
            inputRef.focus();
          }
        });
      },
      onInputExit() {
        this.editMode = false;
      },
      onInputChange(val) {
        this.$emit("input", val);
      }
    }
  };
  </script>
  <style scoped lang="scss">
   .edit-cell {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
   }
  </style>